import { Ref } from 'vue'
import { ElLink, ElTag } from 'element-plus'
import { TableColumn } from '@/components/Table'
import { useI18n } from '@/hooks/web/useI18n'
import { calculateColumnWidth } from '@/utils'

export const useWholesalOrderTableColumns = (
  handleJump: Function,
  useEnumeratePicker: Function,
  useEnumerateMultiplePicker: Function,
  payStatusList: Ref<any[]>,
  statusList: Ref<any[]>,
  signatoryList: Ref<any[]>,
  contractSigningStatusList: Ref<any[]>,
  singleOrderMethodList: Ref<any[]>,
  payTermsList: Ref<any[]>,
  currencyList: Ref<any[]>,
  dataList: Ref<any[]>,
  exceptionStatusList: Ref<any[]>,
  afterSalesStatusList: Ref<any[]>
): TableColumn[] => {
  const { t } = useI18n()

  return [
    {
      field: 'id',
      label: t('expandCustomer.serialNumber'),
      width: 70,
      align: 'center',
      headerAlign: 'center'
    },
    {
      field: 'order_no',
      label: t('wholesalOrder.orderNo'),
      width: calculateColumnWidth(dataList.value, 'order_no'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => (
          <ElLink underline={false} type="primary" onClick={() => handleJump('detail', row)}>
            {row.order_no}
          </ElLink>
        )
      }
    },
    {
      field: 'user_email',
      label: t('wholesalOrder.wholesal'),
      width: calculateColumnWidth(dataList.value, 'user_email'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => (
          <ElLink underline={false} type="primary" onClick={() => handleJump('customer', row)}>
            {row.user_email}
          </ElLink>
        )
      }
    },
    {
      field: 'pay_status',
      label: t('wholesalOrder.payStatus'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(payStatusList.value, row.pay_status)
      }
    },
    {
      field: 'status',
      label: t('wholesalOrder.status'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => {
          const classes = {
            '!bg-[var(--el-color-info-light-9)]': true,
            '!border-none': true,
            '!font-600': true,
            '!text-[#67c23a]': row?.status === 100,
            '!text-[#c8c9cc]': row?.status === 70,
            '!text-[#20B2AA]': row?.status === 50,
            '!text-[#9370DB]': row?.status === 40,
            '!text-[#1E90FF]': row?.status === 30,
            '!text-[#32CD32]': row?.status === 21,
            '!text-[#FFD700]': row?.status === 20,
            '!text-[#FFA500]': row?.status === 10
          }
          return <ElTag class={classes}>{useEnumeratePicker(statusList.value, row.status)}</ElTag>
        }
      }
    },
    {
      field: 'aftersales_status',
      label: t('order.aftersales_status'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => {
          if (!row.aftersales_status) return ''
          const classes = {
            '!bg-[var(--el-color-info-light-9)]': true,
            '!border-none': true,
            '!font-600': true,
            '!text-[#FFA500]': row?.aftersales_status === 1, // 退货中
            '!text-[#67c23a]': row?.aftersales_status === 4, // 已退货
            '!text-[#1E90FF]': row?.aftersales_status === 8, // 退款中
            '!text-[#9370DB]': row?.aftersales_status === 16, // 已退款
            '!text-[#FF6B6B]': row?.aftersales_status === 32 // 已退货 已退款
          }
          return (
            <ElTag class={classes}>
              {useEnumeratePicker(afterSalesStatusList.value, row.aftersales_status)}
            </ElTag>
          )
        }
      }
    },
    {
      field: 'exceptionstatus',
      label: t('order.exceptionstatus'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      slots: {
        default: ({ row }) => {
          const exceptionStatuses =
            typeof row.exceptionstatus === 'string'
              ? row.exceptionstatus.split(',').filter((status) => status.trim())
              : []

          // 循环调用 useEnumeratePicker 方法，获取每个状态的显示文本
          const exceptionStatusesValue = exceptionStatuses.map((status) =>
            useEnumeratePicker(exceptionStatusList.value, Number(status))
          )
          // 将结果拼接成字符串，用逗号分隔
          return exceptionStatusesValue.join(', ')
        }
      }
    },
    {
      field: 'buy_goods',
      label: t('order.buyGoods'),
      align: 'center',
      headerAlign: 'center',
      width: '480',
      // 移除 width 属性，让列宽度由内容撑开
      slots: {
        default: ({ row }) => {
          // 假设 buy_goods 是一个数组，如果不是则转为空数组
          const buyGoodsList = Array.isArray(row.buy_goods) ? row.buy_goods : []
          return (
            <div style={{ width: '100%', textAlign: 'center' }}>
              {buyGoodsList.map((item, index) => (
                <div class="flex text-left" key={index}>
                  <div class="w-120 truncate" title={item?.warehouse_name || ''}>
                    {item?.warehouse_name || ''}
                  </div>
                  <div class="w-100">{item?.is_futures || ''}</div>
                  <div class="w-200 truncate" title={item?.code || ''}>
                    {item?.code || ''}
                  </div>
                  <div class="w-60">{item?.quantity}</div>
                </div>
              ))}
            </div>
          )
        }
      }
    },
    {
      field: 'id_number',
      label: t('order.id_number'),
      width: calculateColumnWidth(dataList.value, 'id_number'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'signatory',
      label: t('order.signatory'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(signatoryList.value, row.signatory)
      }
    },
    {
      field: 'signing_date',
      label: t('order.signing_date'),
      width: calculateColumnWidth(dataList.value, 'signing_date'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'contract_signing_status',
      label: t('order.contract_signing_status'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) =>
          useEnumeratePicker(contractSigningStatusList.value, row.contract_signing_status)
      }
    },
    {
      field: 'owner',
      label: t('order.owner'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(signatoryList.value, row.owner)
      }
    },
    {
      field: 'single_order_method',
      label: t('order.single_order_method'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) =>
          useEnumeratePicker(singleOrderMethodList.value, row.single_order_method)
      }
    },
    {
      field: 'partner',
      label: t('order.partner'),
      width: 150,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumerateMultiplePicker(signatoryList.value, row.partner)
      }
    },
    {
      field: 'product_total_original_amount',
      label: t('wholesalOrder.product_total_original_amount'),
      width: 120,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'total_amount',
      label: t('wholesalOrder.total_amount'),
      width: calculateColumnWidth(dataList.value, 'total_amount'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'pay_amount',
      label: t('order.theAmountOfThePayment'),
      width: calculateColumnWidth(dataList.value, 'pay_amount'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'order_remark',
      label: t('wholesalOrder.remark'),
      width: calculateColumnWidth(dataList.value, 'order_remark'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'pay_terms',
      label: t('order.pay_terms'),
      width: 100,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(payTermsList.value, row.pay_terms)
      }
    },
    {
      field: 'currency',
      label: t('wholesalOrder.currency'),
      width: 150,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(currencyList.value, row.currency)
      }
    },
    {
      field: 'creator',
      label: t('wholesalOrder.creator'),
      width: calculateColumnWidth(dataList.value, 'creator'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(signatoryList.value, row.creator)
      }
    },
    {
      field: 'create_time',
      label: t('wholesalOrder.create_time'),
      width: 140,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    },
    {
      field: 'updater',
      label: t('order.updater'),
      width: calculateColumnWidth(dataList.value, 'updater'),
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true,
      slots: {
        default: ({ row }) => useEnumeratePicker(signatoryList.value, row.updater)
      }
    },
    {
      field: 'update_time',
      label: t('wholesalOrder.update_time'),
      width: 140,
      align: 'center',
      headerAlign: 'center',
      showOverflowTooltip: true
    }
  ]
}
